﻿<UserControl 
    x:Class="Imagin.Controls.Common.DirectionPad"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:local="clr-namespace:Imagin.Controls.Common"
    x:Name="PART_DirectionPad">
    <ItemsControl DataContext="{Binding ElementName=PART_DirectionPad}" ClipToBounds="True" ItemsSource="{Binding Items}">
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="{x:Type ContentPresenter}">
                <Setter Property="Grid.Row" Value="{Binding Row}" />
                <Setter Property="Grid.Column" Value="{Binding Column}" />
                <Setter Property="Opacity" Value="0" />
                <Style.Triggers>
                    <EventTrigger RoutedEvent="ContentPresenter.SizeChanged">
                        <BeginStoryboard>
                            <BeginStoryboard.Storyboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1.0" Duration="0:0:0.5" AccelerationRatio="0.4" DecelerationRatio="0.4"/>
                                </Storyboard>
                            </BeginStoryboard.Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0"/>
                        <ColumnDefinition Width="24"/>
                        <ColumnDefinition Width="24"/>
                        <ColumnDefinition Width="24"/>
                        <ColumnDefinition Width="0"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0"/>
                        <RowDefinition Height="24"/>
                        <RowDefinition Height="24"/>
                        <RowDefinition Height="24"/>
                        <RowDefinition Height="0"/>
                    </Grid.RowDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <local:MaskedButton
                    Width="20"
                    Height="20"
                    ToolTip="{Binding Name}"
                    Source="{Binding Icon}"
                    Click="OnClick"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>
